<template>
    <el-dialog class="elDialog" :title="wintitle" :visible.sync="isShow" width="50%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="dialog">
            <div class="top">
                <zy-select :fromValue="queryForm" :formConfig="formConfig" @search="searchBtn" @addValue="addValue" @resetForm="resetForm" :isAdd="true"></zy-select>
            </div>
            <div class="bottom">
                <div :class="activeImg == it.id ? 'item item_act' : 'item'" v-for="it in tableData" @click="choose(it.id)" @dblclick="handDblclick(it)">
                    <div class="title">
                        {{ it.name }}
                    </div>
                    <img :src="'/static' + it.photo" alt="" :title="it.name" />
                    <!-- <el-image :title="it.name" :src="'/static' + it.photo" :preview-src-list="tableData.map(e=>e.photo)"></el-image> -->
                    <div class="icons">
                        <i :class="activeImg == it.id ? 'el-icon-star-on ' : 'el-icon-star-off'"></i>
                        <i class="el-icon-edit-outline" @click="editValue(it)"></i>
                        <i class="el-icon-delete del" title="删除图片" @click.stop="delimg(it.id)"></i>
                    </div>
                </div>
            </div>
            <div class="pag">
                <el-pagination :page-size="pagination.pageSize" @current-change="changePage" layout="total,prev,pager,next,jumper" :total="pagination.total" :current-page="currentPage"></el-pagination>
            </div>
            <zy-form ref="zyform1" :dialog="dialog" @add="addimg" @set="setimg"></zy-form>
        </div>
    </el-dialog>
</template>

<script>
import zyTable from '@/components/common/zyTable.vue'
import zySelect from '@/components/common/zySelect.vue'
import zyForm from '../common/zyForm.vue'
import { requestApi } from '@/requset/api'
import { formConfig1, config1 } from './config'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            formConfig: formConfig1,
            dialog: {
                config: [],
                form: {},
                title: '添加模型图',
            },
            queryForm: {
                page: 1,
                size: 9,
                name: '',
            },

            wintitle: '配置设备模型图',
            isShow: false,
            tableData: [],

            pagination: {
                pageSize: null,
            },
            activeImg: 0,
            device_id: null,
        }
    },
    components: { zyTable, zySelect, zyForm },
    methods: {
        doOpen(device_id) {
            this.device_id = device_id
            this.isShow = true
            this.page = 1
            this.searchBtn()
        },

        choose(id) {
            this.activeImg = id
        },
        handDblclick(e) {
            let { photo } = e
            requestApi('post', 'device/upload/25D', {
                id: this.device_id,
                device_25D_img: photo,
            }).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('设置成功')
                    this.isShow = false
                    this.$emit('initImg')
                }
            })
        },
        addimg(e) {
            requestApi('post', 'device/img25/add', e).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('添加成功')
                    this.$refs.zyform1.closeDialog()
                    this.searchBtn()
                }
            })
        },
        setimg(e) {

            requestApi('post', 'device/img25/edit', e).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('编辑成功')
                    this.$refs.zyform1.closeDialog()
                    this.searchBtn()
                }
            })
        },
        searchBtn() {
            requestApi('post', 'device/img25/list', this.queryForm).then((res) => {
                if (res.data.code == 0) {
                    this.$set(this, 'tableData', res.data.data)
                    this.pagination = res.data.pagination
                }
            })
        },
        delimg(id) {
            this.$confirm('删除此模型图', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', 'device/img25/delete', { id }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            if (this.tableData.length === 1 && this.queryForm.page !== 0) {
                                this.queryForm.page--
                            }
                            this.searchBtn()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        resetForm() {
            this.queryForm = {
                page: 1,
                size: 9,
                name: '',
            }
            this.searchBtn()
        },
        changePage(e) {
            this.queryForm.page = e
            this.searchBtn()
        },
        addValue() {
            this.dialog.title = '添加模型图'
            this.$refs.zyform1.openDialog('add')
        },
        editValue(it) {

            this.dialog.form =deepClone(it)
            this.dialog.title = '设置模型图'
            this.$refs.zyform1.openDialog('edit')
        },
    },
    created() {
        this.dialog.config = config1
        this.searchBtn()
    },
}
</script>

<style lang="less" scoped>
.elDialog {
    .dialog {
        width: 98%;
        height: 65vh;
        position: relative;
        .top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 60px;
        }
        .bottom {
            position: absolute;
            top: 60px;
            width: 100%;
            height: 50vh;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 30%);

            gap: 0.8rem;
            .item {
                border: 2px solid #007bff;
                border-radius: 6px;
                overflow: hidden;
                cursor: pointer;
                text-align: center;
                position: relative;
                .title {
                    position: absolute;
                    top:0.5rem;
                    height: 14px;
                    width: 100%;
                    // background-color: aliceblue;
                    text-indent: 0.625rem;
                    font-weight: bold;
                    text-align: left;
                    color: white;
                }
                img {
                    height: 100%;
                }
                .icons {
                    position: absolute;
                    right: 0;
                    width: 1.875rem;
                    height: 100%;
                    top: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    color: #007bff;
                    i {
                        font-size: 1.375rem;
                    }
                }

                // .del {
                //     bottom: 0;
                // }
            }
            .item_act {
                border: 2px solid aqua;
                .icons {
                    i {
                        color: aqua;
                    }
                }
            }
        }
        .pag {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;

            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
